
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>JS_LI分页</title>
  <style>
    #kan a{ color:red;}
  </style>
</head>
<body> 
  <ul id="all"> 
    <li><a href="#">第1集</a></li> 
    <li><a href="#">第2集</a></li> 
    <li><a href="#">第3集</a></li> 
    <li><a href="#">第4集</a></li> 
    <li><a href="#">第5集</a></li> 
    <li><a href="#">第6集</a></li> 
    <li id="kan"><a href="#">第7集</a></li> 
    <li><a href="#">第8集</a></li> 
    <li><a href="#">第9集</a></li> 
    <li><a href="#">第10集</a></li> 
    <li><a href="#">第11集</a></li> 
    <li><a href="#">第13集</a></li> 
    <li><a href="#">第14集</a></li> 
    <li><a href="#">第15集</a></li> 
    <li><a href="#">第9集</a></li> 
    <li><a href="#">第10集</a></li> 
    <li><a href="#">第11集</a></li> 
    <li><a href="#">第13集</a></li> 
    <li><a href="#">第14集</a></li> 
    <li><a href="#">第15集</a></li> 
  </ul> 
  <div class="page">
    第<span id="a2"></span>/<span id="a1"></span>页
    <span id="a3"></span>　<a href="#" onClick="change(--pageno)">上一页</a>　　
    <a href="#" onClick="change(++pageno)">下一页</a></div>
  </body> 
  <script> 
    var a = document.getElementById("all").getElementsByTagName("li"); 
    var zz =new Array(a.length) 
    for(var i=0;i <a.length;i++) 
    { zz[i]=a[i].innerHTML } //div的字符串数组付给zz
    var pageno=1               //当前页
    var pagesize=5            //每页多少条信息
    if(zz.length%pagesize==0)
      {var  pageall =zz.length/pagesize }
    else
    {var  pageall =parseInt(zz.length/pagesize)+1}       //一共多少页 

    function change(e){
      pageno=e;
    if(e<1)//如果输入页<1页
    { e=1;pageno=1}//就等于第1页 ， 当前页为1
    if(e>pageall)//如果输入页大于最大页 
    {e=pageall;pageno=pageall}//输入页和当前页都=最大页
    document.getElementById("all").innerHTML=""//全部清空
    for(var i=0;i<pagesize;i++)
    {
       var div =document.createElement("li")//建立div对象
       div.innerHTML=zz[(e-1)*pagesize+i]//建立显示元素
       document.getElementById("all").appendChild(div)//加入all中  
       if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
         break 
     }
     var ye=""
     for(var j=1;j<=pageall;j++)
     {
      if(e==j)
        {ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> "}
      else
        {ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> "}
    }
    document.getElementById("a1").innerHTML=pageall
    document.getElementById("a2").innerHTML=pageno
    document.getElementById("a3").innerHTML=ye
    }
change(1)
</script> 
</body>
</html>